<template>
  <div>
    <PageHeader title="关于我们" description="了解更多关于我们的信息和背景。" />

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
      <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa fa-bullseye text-blue-500 mr-2"></i>
          我们的使命
        </h3>
        <p class="text-gray-700 mb-4">
          提供高质量的前端开发示例，帮助开发者快速掌握现代Web开发技术，
          并推动Web技术的发展和应用。
        </p>
        <ul class="space-y-2 text-gray-700">
          <li class="flex items-start">
            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
            <span>提供清晰、实用的代码示例</span>
          </li>
          <li class="flex items-start">
            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
            <span>分享最新的前端技术和最佳实践</span>
          </li>
          <li class="flex items-start">
            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
            <span>建立开发者社区，促进技术交流和学习</span>
          </li>
        </ul>
      </div>

      <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa fa-eye text-blue-500 mr-2"></i>
          我们的愿景
        </h3>
        <p class="text-gray-700 mb-4">
          成为前端开发学习的首选资源，帮助开发者构建更好的Web应用，
          并为Web技术的发展做出贡献。
        </p>
        <ul class="space-y-2 text-gray-700">
          <li class="flex items-start">
            <i class="fa fa-star text-yellow-500 mt-1 mr-2"></i>
            <span>成为前端开发者信赖的知识平台</span>
          </li>
          <li class="flex items-start">
            <i class="fa fa-star text-yellow-500 mt-1 mr-2"></i>
            <span>推动前端技术的创新和应用</span>
          </li>
          <li class="flex items-start">
            <i class="fa fa-star text-yellow-500 mt-1 mr-2"></i>
            <span>培养更多优秀的前端开发人才</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-8 bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
      <h3 class="text-lg font-semibold mb-4 flex items-center">
        <i class="fa fa-users text-blue-500 mr-2"></i>
        我们的团队
      </h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <TeamMember
            name="张明"
            role="前端开发专家"
            avatar="https://picsum.photos/id/1005/200/200"
            description="拥有10年前端开发经验，精通Vue、React等主流框架"
        />
        <TeamMember
            name="李华"
            role="UI/UX设计师"
            avatar="https://picsum.photos/id/1000/200/200"
            description="专注于用户体验设计，擅长创建美观且易用的界面"
        />
        <TeamMember
            name="王强"
            role="全栈工程师"
            avatar="https://picsum.photos/id/1012/200/200"
            description="精通前后端技术，能够独立开发完整的Web应用"
        />
        <TeamMember
            name="赵敏"
            role="技术经理"
            avatar="https://picsum.photos/id/1027/200/200"
            description="拥有丰富的团队管理经验，擅长技术架构设计"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import TeamMember from '../components/TeamMember.vue'

export default {
  components: {
    PageHeader,
    TeamMember
  }
}
</script>